$tag-border-radius: $base-border-radius;
.tag {
  flex: none;
  color: currentcolor;
  height: 2.4rem;
  background-color: $cafe-con-leche;
  border-radius: $tag-border-radius;
  &.upvoted {
    color: $success-text-emphasis;
    background-color: $success-border-subtle;
  }
  &.downvoted {
    color: $danger-text-emphasis;
    background-color: $danger-border-subtle;
  }
  > * {
    height: 100%;
    padding: 3px 7px;
    vertical-align: middle;
    &:first-child {
      border-top-left-radius: $tag-border-radius;
      border-bottom-left-radius: $tag-border-radius;
    }
    &:last-child {
      border-top-right-radius: $tag-border-radius;
      border-bottom-right-radius: $tag-border-radius;
    }
  }
  .tag-vote-button {
    border-left: 1px dashed $gray-100;
    opacity: 0;
    width: 0px;
    transition-duration: 0.3s;
    transition-property: padding, width, opacity;
    transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
    // Cancelling some .btn styling; we want the .btn class applied
    // for interactivity reasons, but not all the CSS styling
    margin: 0;
    padding: 3px 0;
    &.upvote:hover,
    &.upvote.selected {
      color: $success-text-emphasis;
      background-color: $success-bg-subtle;
    }
    &.downvote:hover,
    &.downvote.selected,
    &.withdraw:hover {
      color: $danger-text-emphasis;
      background-color: $danger-bg-subtle;
    }
  }
  &:hover > .tag-vote-button {
    width: 2em;
    opacity: 1;
  }
  &:not(:hover) > :first-child {
    border-radius: $tag-border-radius;
  }
  & + .tag {
    margin-left: 0.3em;
  }
  @media (hover: none),
    (hover: on-demand),
    (-moz-touch-enabled: 1),
    (pointer: coarse) {
    /* on touch devices, make tags bigger so they are easier to interact with */
    height: 3.3rem;
    font-size: 1.9rem;
    &:hover > .tag-vote-button {
      width: 3em;
    }
    > a {
      pointer-events: none;
    }
    &:hover > a,
    &:focus > a,
    &:focus-within > a {
      pointer-events: initial;
    }
  }
}
